<script setup lang="ts">
import { h, computed } from 'vue'
import { NAvatar, NIcon } from 'naive-ui'

interface Props {
  avatarSrc?: string
  avatarIcon?: any // 用于支持 n-icon
  name: string
  subtitle?: string
  description?: string
  footerLeft?: string
  footerRight?: string
  badgeText?: string
  badgeColor?: string
  isActionHover: boolean
}

const props = withDefaults(defineProps<Props>(), {
  avatarSrc: '',
  name: '',
  subtitle: '',
  description: '',
  footerLeft: '',
  footerRight: '',
  badgeText: '',
  badgeColor: '#155aef',
  isActionHover: false
})

const avatarContent = computed(() => {
  if (props.avatarSrc) {
    return h(NAvatar, { size: 50, src: props.avatarSrc })
  } else if (props.avatarIcon) {
    return h(NIcon, { size: 50 }, { default: () => h(props.avatarIcon) })
  }
  return null
})

const actionClass = computed(() =>
  props.isActionHover ? 'action-wrapper--hover' : 'action-wrapper'
)

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click')
}
</script>

<template>
  <div class="flexible-card rounded-xl">
    <slot name="card">
      <div class="card-header" @click="handleClick">
        <div class="avatar-wrapper">
          <slot name="avatar">
            <component :is="avatarContent" />
            <div v-if="badgeText" class="badge" :style="{ backgroundColor: badgeColor }">
              {{ badgeText }}
            </div>
          </slot>
        </div>
        <div class="info-wrapper">
          <h3 class="name">
            <slot name="name">{{ name }}</slot>
          </h3>
          <div class="subtitle">
            <slot name="subtitle">{{ subtitle }}</slot>
          </div>
        </div>
        <div :class="actionClass">
          <slot name="action"></slot>
        </div>
      </div>
      <div class="card-body">
        <slot name="description">
          <p class="description">{{ description }}</p>
        </slot>
      </div>
      <slot name="footer">
        <div class="card-footer">
          <div class="footer-left">
            <slot name="footer-left">{{ footerLeft }}</slot>
          </div>
          <div class="footer-right">
            <slot name="footer-right">{{ footerRight }}</slot>
          </div>
        </div>
      </slot>
    </slot>
  </div>
</template>

<style scoped lang="scss">
$primary-color: #155aef;
$bg-color: white;
$text-color: #333;
$gray-color: #808080;
$border-radius: 8px;

.flexible-card {
  position: relative;
  width: 100%;
  height: 180px;
  background-color: $bg-color;
  display: flex;
  flex-direction: column;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.034);
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    .card-header .action-wrapper--hover {
      display: flex;
    }
  }

  .card-header {
    display: flex;
    align-items: center;
    cursor: pointer;

    .avatar-wrapper {
      position: relative;
      margin-right: 15px;

      .badge {
        position: absolute;
        top: 0;
        right: 0;
        color: white;
        font-size: 10px;
        padding: 1px 4px;
        border-radius: 0 0 0 $border-radius;
      }
    }

    .info-wrapper {
      flex-grow: 1;

      .name {
        font-size: 16px;
        font-weight: 700;
        color: $text-color;
        margin: 0;
        margin-bottom: 5px;
      }

      .subtitle {
        font-size: 13px;
        color: $gray-color;
      }
    }

    .action-wrapper {
      flex-shrink: 0;
    }
    .action-wrapper--hover {
      flex-shrink: 0;
      display: none;
    }
  }

  .card-body {
    flex-grow: 1;
    overflow: hidden;

    .description {
      font-size: 12px;
      margin: 10px 0;
      color: $gray-color;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  .card-footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: $gray-color;

    .footer-left,
    .footer-right {
      display: flex;
      align-items: center;
    }
  }
}
</style>
